<template>
    <div class="progress-tree">
        <div :class="['tree-list', getFullStatus]">
            <div :class="['tree-cell', getClass(item), getBefore(treeData.common, index)]" v-for="(item, index) in treeData.common" :key="item.id" @click="getItem(item)">
                <p class="time">{{item.time || ''}}</p>
                <el-popover placement="bottom" trigger="hover" :width="260" v-if="options.moreOptions && item.options">
                    <template #reference>
                        <p class="tree-node">{{item.label}}</p>
                    </template>
                    <div style="">
                        <el-button style="margin: 0 10px 10px 0;" v-for="btn in item.options" :key="btn.id" size="small" type="primary" plain  @click="getOptions(btn)">{{btn.label}}</el-button>
                    </div>
                </el-popover>
                <template v-else>
                    <p class="tree-node">{{item.label}}</p>
                    <div class="circle-tree" v-if="item.isCircle" style="position:absolute;">
                        <el-progress type="circle" :percentage="item.percent" :width="80" :stroke-width="5" color="var(--el-color-primary)">
                            <p class="tree-node" style="background: transparent;margin-top:0;color:var(--el-color-primary)">{{item.label}}</p>
                        </el-progress>
                    </div>
                </template>
            </div>
        </div>
        <div :class="['tree-other', getTreeActive, (!treeData.successStatus || !treeData.disuseStatus) ? 'tree-without-all' : '']" v-if="treeData.successStatus || treeData.disuseStatus">
            <div class="tree-list" v-if="treeData.successStatus">
                <div :class="['tree-cell', getClass(item), getBefore(treeData.successStatus, index)]"
                     v-for="(item, index) in treeData.successStatus"
                     :key="item.id"
                     @click="getItem(item)">
                    <p class="time">{{ item.time || ''}}</p>
                    <p class="tree-node">{{item.label}}</p>
                </div>
            </div>
            <div class="tree-list" v-if="treeData.disuseStatus">
                <div :class="['tree-cell', getClass(item), getBefore(treeData.disuseStatus, index)]" v-for="(item, index) in treeData.disuseStatus" :key="item.id" @click="getItem(item)">
                    <p class="time">{{item.time || ''}}</p>
                    <p class="tree-node">{{item.label}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
''"
<script>
import { toRefs, computed, watch, ref } from 'vue'
export default {
    name: 'TreeLine',
    props: {
        data: {
            type: Object,
            default() {
                return {}
            }
        },
        active: {
            type: [Number, String],
            default: null
        },
        options: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    setup(props, context) {
        const { data, active, options } = toRefs(props)
        let activeId = ref(active.value)
        const treeData = computed({
            get: () => {
                if(options.value && options.value.hide) {
                    // 设置隐藏规则
                    // 正则隐藏
                    const hide = options.value.hide
                    const lastId = options.value.lastId
                    const hideRex = options.value.hideRex
                    if(hide && lastId && !hideRex.test(activeId.value)) {
                        const idx = data.value.common.findIndex(item => {
                            return item.value == lastId
                        })
                        const newArr = data.value.common.filter((item, index) => {
                            return (index <= idx || item.value == activeId.value)
                        })
                        return {
                            common: newArr,
                            successStatus: data.value.successStatus,
                            disuseStatus: data.value.disuseStatus
                        }
                    }else{
                        const newArr = data.value.common.filter(item => {
                            return hideRex.test(item.value)
                        })
                        return {
                            common: newArr,
                            successStatus: data.value.successStatus,
                            disuseStatus: data.value.disuseStatus
                        }
                    }
                }
                return data.value
            }
        })
        watch(() => active.value, val => {
            activeId.value = val
        })
        const getClass = computed(() => {
            return item => {
                return item.value == activeId.value ? 'active' : ''
            }
        })
        const getTreeActive = computed(() => {
            let topIdx = -1
            let bottomIdx = -1
            if(treeData.value.successStatus) {
                topIdx = treeData.value.successStatus.findIndex(item => {
                    return item.value == activeId.value
                })
            }
            if(treeData.value.disuseStatus) {
                bottomIdx = treeData.value.disuseStatus.findIndex(item => {
                    return item.value == activeId.value
                })
            }
            return topIdx > -1 ? 'tree-top-active' : bottomIdx > -1 ? 'tree-bottom-active' : ''
        })
        const getCommonWidth = computed(() => {
            return item => {
                const idx = item.findIndex(e => {
                    return e.value == activeId.value
                })
                return getTreeActive.value ? '100%' : idx > -1 ? `calc(100% * ${idx / item.length})` : 0
            }
        })
        const getFullStatus = computed(() => {
            return getTreeActive.value ? 'tree-active' : ''
        })
        const getBefore = computed(() => {
            return (item, index) => {
                const idx = item.findIndex(e => {
                    return e.value == activeId.value
                })
                return index < idx ? 'pass-active' : ''
            }
        })
        const getItem = e => {
            context.emit('getItem', e)
        }
        const getOptions = e => {
            context.emit('getBtnOption', e)
        }
        return {
            treeData,
            getClass,
            getTreeActive,
            getCommonWidth,
            getFullStatus,
            getBefore,
            getItem,
            getOptions
        }
    }
}
</script>

<style scoped lang="scss">

.progress-tree{
    position: relative;
    display: flex;
    align-items: center;
    .tree-list{
        display: flex;
        align-items: center;
        margin-left: 10px;
        position: relative;
        z-index: 5;
        // overflow-x: hidden;
        flex: 1;
        &::before{
            content: "";
            position: absolute;
            border-radius: 10px;
            left: 0;
            right: 0;
            top: 20px;
            background: var(--next-bg-columnsMenuBarColor);
            // box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
            height: 5px;
        }
        .tree-node{
            margin-top: 10px;
            font-size: 12px;
            &:hover{
                cursor: pointer;
                color: var(--el-color-primary);
            }
        }
        .time{
            height: 20px;
            font-size: 12px;
            line-height: 20px;
            color: var(--next-bg-menuBar-light-1);
        }
        .tree-cell{
            position: relative;
            min-width: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            &::before{
                content: "";
                position: absolute;
                top: 17px;
                width: 6px;
                height: 6px;
                left: calc(50% - 10px);
                border-radius: 50%;
                background: #fff;
                z-index: 5;
                border: 2px solid var(--next-bg-columnsMenuBarColor);
            }
            &:hover{
                cursor: pointer;
            }
            .circle-tree{
                position: absolute;
                background: #fff;
                top: -17px;
                z-index: 10;
            }
        }
        .active{
            &::before{
                border-color: var(--el-color-primary);
            }
            .tree-node {
                background: var(--el-color-primary);
                text-align: center;
                padding: 0 2px;
                color: var(--next-bg-topBar);
                border-radius: 2px;
                display: inline-block;
            }
            &::after{
                content: "";
                position: absolute;
                top: 20px;
                height: 5px;
                left: 0;
                right: -1px;
                background: var(--el-color-primary);
            }
            &:last-child{
                &::after{
                    border-radius: 10px;
                    right: 0;
                }
            }
        }
        .active-progress{
            position: absolute;
            left: 0;
            top: 20px;
            background: var(--el-color-primary);
            height: 5px;
            border-radius: 10px;
        }
        .pass-active{
            &::before{
                border-color: var(--el-color-primary);
            }
            .tree-node{
                color: var(--el-color-info);
            }
            &::after{
                content: "";
                position: absolute;
                top: 20px;
                height: 5px;
                left: 0;
                right: -1px;
                background: var(--el-color-primary);
            }
            &:first-child{
                &::after{
                    border-radius: 10px 0 0 10px;
                }
            }
        }
    }
    .tree-other{
        margin-left: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        flex: .8;
        &::before{
            content: "";
            position: absolute;
            top: 20px;
            left: -25px;
            width: 36px;
            border-top: 5px solid var(--next-bg-columnsMenuBarColor);
            border-left: 5px solid var(--next-bg-columnsMenuBarColor);
            height: 21px;
            border-top-left-radius: 30px;
        }
        &::after{
            content: "";
            position: absolute;
            bottom: 22px;
            left: -25px;
            width: 36px;
            border-bottom: 5.5px solid var(--next-bg-columnsMenuBarColor);
            border-left: 5px solid var(--next-bg-columnsMenuBarColor);
            height: 21px;
            border-bottom-left-radius: 30px;
        }
    }
    .tree-without-all{
        margin-left: 0;
        .tree-list{
            margin-left: 0;
        }
        &::before, &::after{
            display: none;
        }
    }
    .tree-top-active {
        &::before{
            border-color: var(--el-color-primary);
        }
    }
    .tree-bottom-active{
        &::after{
            border-color: var(--el-color-primary);
        }
    }
    .tree-active{
        .tree-cell{
            .tree-node{
                color: var(--el-color-info);
            }
            &::before{
                border-color: var(--el-color-primary);
            }
            &::after{
                content: "";
                position: absolute;
                top: 20px;
                height: 5px;
                left: 0;
                right: -1px;
                background: var(--el-color-primary);
            }
            &:first-child{
                &::after{
                    border-radius: 10px 0 0 10px;
                }
            }
        }
    }
}
</style>
